<template>
  <div>
    <el-row style="margin-top: 20px;">
      <el-col :span="12" :offset="4">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="活动地点" prop="address">
            <el-select v-model="formData.address" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动对象" prop="object">
            <el-select v-model="formData.object" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model.number="formData.phone" maxLength="11"></el-input>
          </el-form-item>
          <el-form-item label="审核人ID" prop="administrator">
            <el-input v-model.number="formData.administrator" maxLength="11"></el-input>
          </el-form-item>
          <el-form-item label="微信" prop="wx">
            <el-input v-model.number="formData.wechat" maxLength="20"></el-input>
          </el-form-item>
          <el-form-item label="参与人数" prop="max_person">
            <el-input-number v-model="formData.max_person" :min="0" :max="1000"></el-input-number>
          </el-form-item>
          <el-form-item label="所属社团" prop="club">
            <el-select v-model="formData.club"  placeholder="请选择">
              <el-option v-for="(club) in clubList"
                         :label="club.clubName"
                         :key="club.clubId"
                         :value="club.clubId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动分类" prop="kind">
            <el-select v-model="formData.kind" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动开始时间" prop="start_time">
            <el-date-picker
              v-model="formData.start_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动简介" prop="describe">
            <el-input
              type="textarea"
              placeholder="请输入内容(100字内)"
              :maxlength="100"
              v-model="formData.describe"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="活动详情" prop="details">
            <el-input
              type="textarea"
              placeholder="请输入内容(200字内)"
              :maxlength="200"
              v-model="formData.details"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="添加图片" :prop="this.formData.photo">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/api/covers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item class="button_submit">
            <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addActivity} from '@/api/activity'
import {getClublist} from '@/api/club'
export default {
  name: 'addActivity',
  data () {
    return {
      imageUrl: '',
      city: {},
      formData: {
        name: '', // 名称
        club: '',
        address: '', // 地址
        id: '',
        administrator: '',
        describe: '', // 介绍
        wechat: '',
        object: '',
        kind: '',
        details: '',
        max_person: '',
        state: 0,
        originator: 0,
        photo: '',
        submission_time: '',
        startTime: ''
      },
      clubList: [],
      options1: [{
        value: '选项1',
        label: '足球场'
      }, {
        value: '选项2',
        label: '喷泉广场'
      }, {
        value: '选项3',
        label: '学术报告厅'
      }, {
        value: '选项4',
        label: 'E楼'
      }, {
        value: '选项5',
        label: 'A楼'
      }, {
        value: '选项6',
        label: 'B楼'
      }, {
        value: '选项7',
        label: 'C楼'
      }
      ],
      options2: [{
        value: '选项1',
        label: '软件工程系'
      }, {
        value: '选项2',
        label: '数码媒体系'
      }, {
        value: '选项3',
        label: '计算机系'
      }, {
        value: '选项4',
        label: '网络技术系'
      }, {
        value: '选项5',
        label: '外语系'
      }, {
        value: '选项6',
        label: '财会系'
      }, {
        value: '选项7',
        label: '管理系'
      }, {
        value: '选项8',
        label: '全体学生'
      }
      ],
      options3: [{
        value: '选项1',
        label: '文娱'
      }, {
        value: '选项2',
        label: '体育'
      }, {
        value: '选项3',
        label: '科技'
      }, {
        value: '选项4',
        label: '素拓'
      }, {
        value: '选项5',
        label: '讲座'
      },{
        value: '选项6',
        label: '学术'
      }
      ],

      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入详细地址', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系电话'},
          {type: 'number', message: '电话号码必须是数字'}
        ],
        administrator: [
          {required: true, message: '请审输入核人ID'},
          {type: 'number', message: 'ID号码必须是数字'}
        ],
        describe: [
          {required: true, message: '请输入简单介绍', trigger: 'blur'}
        ], // 介绍
        object: [
          {required: true, message: '请选择对象', trigger: 'blur'}
        ],
        club: [
          {required: true, message: '请选择社团', trigger: 'blur'}
        ],
        details: [
          {required: true, message: '请输入详细内容', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择时间', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    // headTop
  },
  created() {
    this.getClubName();
  },
  methods: {
    async getClubName() {
      await getClublist(this.formData).then(res => {
        console.log(res[0].clubId);
        this.clubList = res;
        console.log(this.clubList[0].clubName);
      })
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = res;
      this.formData.photo=res;
    },
    beforeAvatarUpload(file) {
      const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isRightType) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isRightType && isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        console.log("aaa");
        if (valid) {
          Object.assign(this.formData)
          try{
            console.log(this.formData.startTime);
            let result = await addActivity(this.formData);
            if (result.state==1) {
              console.log("aaa");
              this.$message({
                type: 'success',
                message: '添加成功'
              });
              this.formData = {
                name: '', //店铺名称
                address: '', //地址
                id: '',
                administrator: '',
                describe: '', //介绍
                wechat: '',
                object: '',
                details:'',
                max_person:'',
                state:0,
                originator:0,
                photo:'',
                submission_time:'',
                startTime: '',
                imageUrl: ''
              };
              location.reload();
            }else{
              this.$message({
                type: 'error',
                message: '添加失败'
              });
            }
            console.log(result)
          }catch(err){
            console.log(err)
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: '请检查输入是否正确',
            offset: 100
          });
          return false;
        }
      });
    }
  }
}
</script>

<style Lang="less" scoped>
.button_submit {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
</style>
